現在的網頁跟鼠標之間要有互動已經是必不可少的環節，透過:hover可以簡單的實現

        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
            display: inline-block;
            text-align: center;
            line-height: 200px;
            cursor: pointer;
        }
        .box:hover{
           background-color: fuchsia;
        }

<div class="box">鼠標移到我身上</div>

前面提過偽元素的概念:hover這個偽元素就是當鼠標移動到物件上後會處理，CSS裡面的樣式，包括不限於改大小，變色，換字等等，當滑鼠移開物件後又會回到原來的樣式

h1:hover{color: tomato;font-size: 36px;}

<h1>連字也可以</h1>

cursor:pointer，當鼠標移動到物件上時，可以改變鼠標的形狀
跟hover的差別是，cursor只是改變滑鼠鼠標的樣子而已，主要是用來提醒使用者，這個東西是可以按的，而hover則能去確實地為物件設定不同的樣式
hover還可以拿來當作觸發條件

        li{display: none;color: red;}
       
        ul:hover li{display: block;}

        <ul>
            滑鼠到我身上，讓li出現
            <li>選項一</li>
            <li>選項二</li>
            <li>選項三</li>
        </ul>

先把li隱藏，ul:hover li{display: block;}這裡的意思是，當滑鼠到ul的時候，才會把ul裡的li用block的方式顯示

        ul{display: block;border: 25vw solid rgb(255, 255, 255);}

border也是物件一部分，所以當滑鼠移到border上也會觸發，這次設了一個超長的邊框，讓滑鼠移上去看看


比較一下ul:hover{}和ul:hover li{}，前者是當滑鼠在ul上懸停時ul會有什麼變化，後者是在ul上懸停時ul的子元素li要有甚麼變化，ul不會被改變